<template>
  <div class="banner-add">

    <div class="createPost-main-container">
      <el-form ref="form" label-width="110px" :rules="rules" :model="form">

        <el-form-item label="导航组名称" prop="name">
          <el-input v-model="form.name" type="text" maxlength="20" show-word-limit />
        </el-form-item>

        <el-form-item label="导航模块" required>
          <el-select v-model="form.priority" clearable class="filter-item" placeholder="选择导航模块">
            <el-option label="导航模块1" :value="1" />
            <el-option label="导航模块2" :value="2" />
            <el-option label="导航模块3" :value="3" />
            <el-option label="导航模块4" :value="4" />
            <el-option label="导航模块5" :value="5" />
          </el-select>
        </el-form-item>

        <div v-for="(item, idx) in navs" :key="idx">
          <el-card class="box-card logo-card">
            <div slot="header" class="clearfix">
              <span>序号：{{ idx + 1 }}</span>
              <el-button style="float: right; padding: 3px 0" type="text" :disabled="idx == navs.length -1" @click="upDateRow(item, idx, 1)">下移</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" :disabled="idx==0" @click="upDateRow(item, idx, 0)">上移</el-button>
              <el-button style="float: right; padding: 3px 0" type="text" @click="deletCard(idx)">删除</el-button>
            </div>
            <div class="text item">
              <el-form-item label="导航标题" required>
                <el-input v-model="item.title" type="text" maxlength="10" show-word-limit />
              </el-form-item>

              <el-form-item label="跳转类型" required>
                <el-select v-model="item.activityType" filterable placeholder="跳转类型" @change="resetActivityType(idx)">
                  <el-option
                    v-for="(type, index) in typeList"
                    :key="index"
                    :label="type.text"
                    :value="type.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="item.activityType=='CATEGORY'" label="跳转链接" required>
                <el-select v-model="item.link" filterable placeholder="跳转详情">
                  <el-option
                    v-for="(link, index) in categoryLink"
                    :key="index"
                    :label="link.name"
                    :value="link.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="item.activityType=='PRODUCT'" label="跳转链接" required>
                <el-select v-model="item.link" filterable placeholder="跳转详情">
                  <el-option
                    v-for="(link, index) in productLink"
                    :key="index"
                    :label="link.name"
                    :value="link.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="item.activityType=='NEWS'" label="跳转链接" required>
                <el-select v-model="item.link" filterable placeholder="跳转详情">
                  <el-option
                    v-for="(link, index) in newsLink"
                    :key="index"
                    :label="link.title"
                    :value="link.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="item.activityType=='NEW_PAGE'" label="跳转链接" required>
                <el-select v-model="item.link" filterable placeholder="跳转详情">
                  <el-option
                    v-for="(link, index) in newPageLink"
                    :key="index"
                    :label="link.title"
                    :value="link.id"
                  />
                </el-select>
              </el-form-item>

              <el-form-item v-if="item.activityType=='OTHER'" label="跳转链接">
                <el-input v-model="item.link" />
              </el-form-item>
            </div>
          </el-card>
        </div>

        <el-button
          :loading="ajaxStatus"
          style="margin-left: 10px;"
          type="primary"
          plain
          @click="addCard"
        >
          增加
        </el-button>

      </el-form>
    </div>

    <sticky :class-name="'cms-sub-navbar '+ajaxStatus">
      <el-button :loading="ajaxStatus" style="margin-left: 10px;" type="success" @click="submitForm('1')">
        发布
      </el-button>
      <el-button :loading="ajaxStatus" @click="reset()">
        取消
      </el-button>
    </sticky>

  </div>
</template>

<script>
import { postData, getEditData } from '@/api/home-page/bottom-nav'
import { getNewsLink, getProductLink, getNewpageLink, getCategoryLink } from '@/api/common'
import Sticky from 'components/Sticky'

const defaultForm = {
  name: '',
  priority: '',
  navs: [{
    link: '',
    title: '',
    orderIndex: '',
    activityType: 'CATEGORY'
  }]
}

const typeList = [
  { value: 'CATEGORY', text: '类目', hasId: true },
  { value: 'PRODUCT', text: '产品详情', hasId: true },
  { value: 'NEWS', text: '新闻资讯集合页面', hasId: false },
  { value: 'NEWS_DETAIL', text: '新闻资讯详情', hasId: true },
  { value: 'NEW_PAGE', text: '新建页面', hasId: false },
  { value: 'STANDER', text: '量化标准', hasId: false },
  { value: 'SERVICE', text: '服务', hasId: false },
  { value: 'ABOUT_US', text: '关于我们', hasId: false },
  { value: 'SEARCH', text: '搜索页面', hasId: false },
  { value: 'OTHER', text: '其它', hasId: false }
]

export default {
  components: { Sticky },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    tabName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ajaxStatus: false,
      form: Object.assign({}, defaultForm),
      navs: [],
      typeList,
      newsLink: [],
      productLink: [],
      categoryLink: [],
      newPageLink: [],

      rules: {
        name: { required: true, message: '请输入小于20个字的标题', trigger: 'blur', min: 1, max: 20 }
      }
    }
  },
  computed: {
  },
  created() {
    this.getLinkList()
    if (this.isEdit) {
      const id = this.$route.query && this.$route.query.id
      this.fetchData(id)
    }
  },
  methods: {
    getLinkList() {
      getNewsLink().then(e => {
        this.newsLink = e.data
      })
      getProductLink().then(e => {
        this.productLink = e.data
      })
      getNewpageLink({
        type: 'NEW_PAGE',
        status: 1
      }).then(e => {
        this.newPageLink = e.data
      })
      getCategoryLink().then(e => {
        this.categoryLink = e.data
      })
    },
    addCard() {
      this.navs.push({
        link: '',
        title: '',
        orderIndex: this.navs.length,
        activityType: 'CATEGORY'
      })
    },
    deletCard(idx) {
      this.navs.splice(idx, 1)
    },
    upDateRow(Obj, idx, type) {
      const index = type ? [idx, idx + 1] : [idx - 1, idx]
      this.alterItem(this.navs, ...index)
    },
    /**
     * 交换元素位置
     */
    alterItem(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },

    resetActivityType(idx) {
      this.navs[idx].link = ''
    },

    // 获取编辑数据
    fetchData(id) {
      getEditData(id).then(re => {
        const { data } = re
        this.form = Object.assign(this.form, data)
        this.navs = this.form.navs
      })
    },

    /**
     * 保存、发布接口
     *
     * id：保存为空，编辑传列表id
     */
    submitForm(status) {
      if (this.ajaxStatus) {
        return
      }
      this.ajaxStatus = true
      this.form.navs = this.navs
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.status = status
          postData(this.form)
            .then(re => {
              this.ajaxStatus = false
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success',
                duration: 2000
              })
              this.reset()
            })
            .catch(() => {
              this.ajaxStatus = false
            })
        } else {
          this.ajaxStatus = false
          this.$message.error('请正确填写完整信息后再发布')
          return false
        }
      })
    },

    reset() {
      // 编辑发布后直接关闭tab跳转至列表页面
      if (+this.tabName > 2) {
        this.$emit('removeTab', this.tabName, '1')
        return
      }
      this.form = Object.assign({}, defaultForm)
      this.navs = []
      this.$refs['form'].resetFields()
      this.$emit('removeTab', this.tabName)
    }
  }
}
</script>
<style lang="scss" scoped>
.href-remark{
  color: #5e6d82;
  .red {
    background-color: #fdf6ec;
    color: #e6a23c;
  }
}
.logo-card{
  margin-bottom: 10px;
}
</style>

